import React, { PureComponent } from 'react';
import { NavBar, SideBar, Collapse,Image } from 'antd-mobile';
import "../../styles/Index/Cate.scss"
import {categorylist,categorybrandlist,categorybrandprolist} from "../../api/index"

class Cate extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            tabs: [],
            brandlist: [],
            brandprolist: [],
            brand: '',
            windUp: true,
        }
    }
    async componentDidMount() {
        let categorylistres = await categorylist();
        this.setState({ tabs: categorylistres.data.data })
    }
    async getbrandlist(item) {
        let categorybrandlistres = await categorybrandlist({ category: item });
        this.setState({ brandlist: categorybrandlistres.data.data, brand: item });
    }
    async getbrandprolist(e) {
        this.setState({ windUp: false })
        // console.log(e.target.innerText);
        let categorybrandprolistres = await categorybrandprolist({ category: this.state.brand, brand: e.target.innerText });
        if (categorybrandprolistres.data.code == 200) {
            this.setState({ windUp: true })
        }
        this.setState({ brandprolist: categorybrandprolistres.data.data })
    }
    goGood(id) {
        this.props.history.push({ pathname: '/good', state: { id } });
    }
    render() {
        return (
            <div className='cate'>
                <NavBar className='header' onBack={() => { this.props.history.go(-1) }}>商品分类</NavBar>
                <div className="catelist">
                    <div className="left">
                        <SideBar style={{ '--width': '80px' }} onChange={(item) => { this.getbrandlist(item) }}>
                            {this.state.tabs.map((item) => (
                                <SideBar.Item key={item} title={item} />
                            ))}
                        </SideBar>
                    </div>
                    <div className="right">
                        <Collapse accordion >
                            {
                                this.state.brandlist.map((item, index) => {
                                    return (
                                        <Collapse.Panel key={item.brand} title={item.brand} onClick={(e) => { this.getbrandprolist(e) }}>
                                            {
                                                this.state.brandprolist ?
                                                    this.state.brandprolist.map((item, index) => {
                                                        return (
                                                            <div className="item" key={index} onClick={() => { this.goGood(item.proid) }}>
                                                                <div className="pic">
                                                                    {
                                                                        this.state.windUp ?
                                                                        <img src={item.img1} alt="" />
                                                                        :
                                                                        <Image src='/404' width={100} height={100} />
                                                                    }
                                                                </div>
                                                                <div className="text">

                                                                    <div className="name">
                                                                        {item.proname}
                                                                    </div>
                                                                    <div className="price">
                                                                        {item.originprice}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        )
                                                    })
                                                    :
                                                    <h2>商品已下架</h2>
                                            }
                                        </Collapse.Panel>
                                    )
                                })
                            }
                        </Collapse>
                    </div>
                </div>
            </div>
        );
    }
}

export default Cate;